import React from 'react';
import { Form } from 'antd';
import { Link } from 'umi';
import styles from './index.less';

const SalaryHelper = ({ formKey = 'editSalary', type }) => {
    const propsMap = {
        editSalary: {
            pathname: '/office/personnelManagement/organization/dataManagement/salaryReference',
            desc: (
                <>
                    <span style={{ color: '#FF4000' }}>红色</span>表示删除，
                    <span style={{ color: '#00C800' }}>绿色</span>表示新增，
                    <span style={{ color: '#BCA3EF' }}>紫色</span>表示更新。
                </>
            )
        },
        positionMapping: {
            pathname: '/office/personnelManagement/organization/dataManagement/postReference',
            desc: (
                <>
                    <span style={{ color: '#FF4000' }}>红色</span>表示删除，
                    <span style={{ color: '#00C800' }}>绿色</span>表示新增，
                </>
            )
        }
    };

    const props = propsMap[formKey] || {};

    const view = (
        <div style={{ marginTop: 8 }}>
            <Link to={{ pathname: props.pathname, state: { tabRoute: true } }}>查看当前版本</Link>
        </div>
    );
    const addDescription = (
        <div>
            <span>与当前版本相比有以下修改内容，</span>
            {props.desc}
            <span>请确认并提供审批意见，全部审批通过后，系统将自动更新版本</span>
            {view}
        </div>
    );
    const backDescription = <div>恢复到历史版本，以下为该版本的完整内容{view}</div>;
    const description = type === 'rollback' ? backDescription : addDescription;

    return (
        <Form.Item wrapperCol={{ span: 18, offset: 3 }}>
            <div className={styles.wrap}>
                <b>帮助提示</b>
                <div className={styles.scroll}>{description}</div>
            </div>
        </Form.Item>
    );
};

export default SalaryHelper;
